<template>
  <mu-container>
    <mu-button>车辆信息</mu-button>
    <mu-flex class="mu-transition-row">
      <mu-fade-transition>
        <div>
          <mu-paper :z-depth="1" class="paperSize" v-show="true">
            <mu-appbar color="primary" title="车辆信息 ">
              <mu-button slot="right" flat @click="closeSimpleDialog">
                关闭
              </mu-button>
            </mu-appbar>
            <mu-data-table
              border
              fullscreen
              height="500"
              stripe
              :columns="columns"
              :data="list"
              selectable
              select-all
              :selects.sync="selects"
              checkbox
            >
              <template slot-scope="scope">
                <td class="is-right">{{ scope.row.carno }}</td>
                <td class="is-right">{{ scope.row.speed }}</td>
                <td class="is-right">{{ scope.row.direction }}</td>
                <td class="is-right">{{ scope.row.time }}</td>
                <td class="is-right">{{ scope.row.lng }}</td>
                <td class="is-right">{{ scope.row.lat }}</td>
              </template>
            </mu-data-table>
            <mu-flex align-items="center" style="padding: 8px;" wrap="wrap">
              当前选择的司机:
              <mu-chip
                delete
                v-for="selectIndex in selects"
                @delete="removeSelect(selectIndex)"
                style="margin: 8px;"
                color="green"
                :key="selectIndex"
                >{{ list[selectIndex].carno }}</mu-chip
              >
            </mu-flex>
            <mu-flex align-items="center" style="padding: 8px;" wrap="wrap">
              <mu-button
                color="primary"
                v-for="selectIndex in selects"
                :key="selectIndex"
                @click="checkId(list[selectIndex].carno)"
                >查询司机轨迹</mu-button
              >
            </mu-flex>
            <mu-appbar color="" title=""></mu-appbar>
          </mu-paper>
        </div>
      </mu-fade-transition>
    </mu-flex>
  </mu-container>
</template>
<script>
export default {
  props: ['list'],
  data() {
    return {
      show1: false,
      openSimple: false,
      selects: [],
      sort: {
        name: '',
        order: 'asc'
      },
      columns: [
        { title: '车辆标示码', width: 200, name: 'carno' },
        {
          title: '速度',
          name: 'speed',
          width: 126,
          align: 'center',
          sortable: true
        },
        {
          title: '方向',
          name: 'direction',
          width: 126,
          align: 'center',
          sortable: true
        },
        {
          title: '时间',
          name: 'time',
          width: 126,
          align: 'center',
          sortable: true
        },
        {
          title: '经度',
          name: 'lng',
          width: 126,
          align: 'center',
          sortable: true
        },
        {
          title: '纬度',
          name: 'lat',
          width: 126,
          align: 'center',
          sortable: true
        }
      ]
    }
  },
  methods: {
    closeSimpleDialog() {
      this.$emit('close')
    },
    removeSelect(selectIndex) {
      const index = this.selects.indexOf(selectIndex)
      this.selects.splice(index, 1)
    },
    checkId(e) {
      let that = this
      this.$axios({
        method: 'post',
        url: this.$config.goapi + 'searchid',
        data: this.$qs.stringify({
          carno: e
        })
      }).then(function(res) {
        console.log(res)
        const data = res.data.data
        that.$emit('change-marker', data)
      })
    }
  }
}
</script>

<style>
.mu-transition-row {
  margin-top: 16px;
  height: 100px;
}
.mu-transition-box {
  min-width: 200px;
  height: 100px;
  margin-right: 16px;
  border-radius: 4px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.paperSize {
  position: fixed;
  padding: 0;
  left: 28rem;
  top: 8rem;
}
</style>
